<!--
 * @Author:郑宏杰
 * @Date: 2020-07-07 22:32:45
 * @Description: 登录表单
 * @FilePath: \考试系统\jingkaisystem\src\pages\login\components\loginFrom.vue
--> 
<template>
  <div class="loginFrom">
    <div class="loginToHome">
      <el-form :model="userFrom" ref="userFrom" status-icon label-width="80px" class="loginForm">
        <!--登录标题-->
        <h3 class="title">登录</h3>
        <!--账号-->
        <el-form-item
          label="账号"
          prop="lname"
          :rules="[
      { required: true, message: '请输入手机号码'},
    ]"
        >
          <el-input v-model="userFrom.lname" type="text" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item
          label="密码"
          prop="pwd"
          :rules="[
      { required: true, message: '请输入密码'},
    ]"
        >
          <el-input v-model="userFrom.pwd" type="password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <!--忘记密码-->
        <el-form-item>
          <el-button class="loginBtn" type="primary" @click="submit">登陆</el-button>
          <div class="forget">
            <a href="#">忘记密码？</a>
          </div>
        </el-form-item>
        <!--其他登录-->
        <el-divider>其他方式登录</el-divider>
        <!--微信登录-->
        <wechat-login class="w_icon"></wechat-login>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/login.js"; //登录接口引入
import wechatLogin from "./wechatLogin"; //微信登录组件引入
//引入vuex辅助方法
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("loginModule");
export default {
  data() {
    return {
      userFrom: {
        lname: "", //账号
        pwd: "" //密码
      }
    };
  },
  methods: {
    //登录接口方法
    async API_login(lname, pwd) {
      let data = {
        lname,
        pwd
      };
      return await api.login(this.qs.stringify(data));
    },

    ...mapActions(["setToken", "setUserInfo"]), //引入vuex方法

    /* 登录按钮事件 */
    async submit() {
      let res = await this.API_login(this.userFrom.lname, this.userFrom.pwd);
      console.log(res.data.content);
      if (res.data.statusCode == 200) {
        //登录成功提示
        this.$message({
          message: res.data.message,
          type: "success"
        })
        this.setToken(res.data.content.token); //调用vuex中的异步上传token
        this.setUserInfo(res.data.content); //调用vuex中的异步上传用户信息
        this.$router.push("./home")
      } else {
        //登录失败提示
        this.$message({
          message: res.data.message,
          type: "error"
        });
      }
    }
  },
  components: {
    wechatLogin //微信登录图标组件
  }
};
</script>

<style lang="scss" scoped>
/* 登录框样式 */
.loginFrom {
  /* 登录框from样式 */
  .loginToHome {
    /* 登录标题样式 */
    .title {
      text-align: center;
      margin-top: 10px;
      margin-bottom: 20px;
      font-size: 26px;
      color: rgb(107, 97, 97);
    }
    /* 登录按钮样式 */
    .loginBtn {
      width: 120px;
    }
    /* 忘了密码样式 */
    .forget {
      a {
        text-decoration: none;
      }
    }
    /* 分割线字体的样式 */
    .el-divider__text {
      background-color: transparent;
    }
    /* 微信登录图标样式 */
    .w_icon {
      margin-bottom: 19px;
      font-size: 30px;
    }
  }
}
</style>